<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
   .wai{
    position: relative;
    width: 400px;
    height: 400px;
   }
    .wai>div{
        text-align: center;
    }
    .wai>img{
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .nums{
    display: flex;
    position: absolute;
      bottom: -200px;
       width: 200px;
       height: 30px;
       z-index: 999;

    }
    .nums> .num{
        display: flex;
        height: 20px;
        justify-content: center;
        width: 20px;    
        border-radius: 15px;
        
    }
    .pink{
        background-color: pink;
    }
   
   
</style>
<script src="./js/jquery-3.7.1.js"></script>
<body>
    <div class="wai">
       
   
        <div class="nums">
            <div class="num">1</div>
            <div class="num">2</div>
            <div class="num">3</div>
            <div class="num">4</div>
            <div class="num">5</div>
        </div>
    </div>
</body>
<script>
  //后端导入图片
    $.ajax({
        url:"http://localhost:8080/demo/ShowNewspicServlet",
        method:'get',
        success:function(res){
            JSON.parse(res).data.forEach(element => {
                var img = `<img src=http://localhost:8080/images/${element.newspic} class="img" > `
                $('.wai').append(img)
            });
           
        }
    })
//制作新闻轮播图
  
    var photo = document.getElementsByClassName('img');
    var nums = document.getElementsByClassName('num')
    var index2 = 0;
    var time = window.setInterval(lunbo, 2000);
    function lunbo() {

        for (let i = 0; i < photo.length; i++) {
            if ((i) == index2) {
                photo[i].style.display = "block";
                nums[i].classList.add("pink");
            } else {
                photo[i].style.display = "none";
                nums[i].classList.remove("pink");
            }
        }
        index2++;
        if (index2 >= photo.length) {
            index2 = 0;
        }
    }


</script>
</html>